<template>
  <div class="infoBar">
    <div class="top">
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wenzhang"></use>
        </svg>
        <span>最近文章</span>
      </div>
      <div
        class="artInfo"
        v-for="item in store.article?.slice(0, 5)"
        :key="item._id"
        @click="handlePathname(item._id)"
      >
        <span>{{ item.title }}</span>
        <span>{{ item.createdAt.split(" ")[0] }}</span>
      </div>
    </div>
    <div class="middle">
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wangzhandingzhi"></use>
        </svg>
        <span>博客简介</span>
      </div>
      <div class="artInfo">
        <p>
          从有想法到前后开发到部署，经历整个网站项目周期开发，心里还是有所成就感的，个人博客网站主要是记录个人的一些笔记和经历，记录人生痕迹
        </p>
      </div>
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chengjiu"></use>
        </svg>
        <p>运行天数：{{ time }}天</p>
      </div>
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qq"></use>
        </svg>
        <p>QQ：2728449959</p>
      </div>
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youxiang"></use>
        </svg>
        <p>邮箱：2728449959@qq.com</p>
      </div>
      <div class="artInfo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-douyin-douyinfensi"></use>
        </svg>
        <p>抖音：<a href="https://www.douyin.com/user/self?from_tab_name=main" target="_blank">点击跳转我抖音</a></p>
          
      </div>
      <div class="artInfo">
        <p>
          参与开发过的项目：<a href="http://47.106.170.166" target="_blank"
            >熊猫起始页</a
          >
        </p>
      </div>
      <Music />
    </div>
    
  </div>
</template>

<script setup>
import Music from "@/views/page/Music.vue";
import { computed, onMounted, reactive } from "vue";
import { useRouter,useRoute  } from "vue-router";
import { useHomeStore } from "@/stores/home.js";
const store = useHomeStore();
const router = useRouter();
onMounted(() => {
  // console.log(store.article);
});
const data = reactive({
  arr: [],
});
const handlePathname = (id) => {
  // console.log(id);
  router.push({
    // path: "/artDetail",
    name: "artDetail",
    query: {
      id,
    },
  });
  // router.push({
  //   name: 'artDetail',
  //   params: { id } // 使用params传递
  // });
};
const time = computed(() => {
  const launchDate = new Date("2023/04/20"); // 网站发布日期
  const today = new Date(); // 当前日期
  const timeDiff = Math.abs(today.getTime() - launchDate.getTime()); // 计算时间差
  const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); // 计算天数差
  return diffDays;
});
</script>

<style lang="scss" scoped>
.infoBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .top {
    margin: 10px 0;
    .artInfo:nth-child(1) {
      justify-content: flex-start;
    }
    .artInfo {
      cursor: pointer;
      color: 12px;
      width: 170px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #efefef92;
      font-size: 12px;

      .icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
  .middle {
    margin-top: 5px;
    p {
      font-size: 12px;
      // text-align: center;
      a {
        color: orchid;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .artInfo {
      width: 170px;
      padding: 6px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #efefef92;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}
</style>